<template>
<div>
    <div class="inner">
         <!-- 顶部搜索框 -->
        <div class="wode-search">
            <van-icon name="plus" size="20"/>
            <van-search placeholder="请输入搜索关键词"  class="search"/>
            <span @click="shezhi()">设置</span>
        </div>
        <!-- 头像和用户名 -->
        <div class="user">
            <div class="user-info">
                <div>
                <van-image
                round
                width="0.8rem"
                height="0.8rem"
                :src=touxiang
                />
            </div>
            <span class="name">{{this.$store.state.userInfo.username}}</span>
        </div>    
        <van-icon name="arrow" size="20" @click="self()"/>
        </div>
        <!-- 关注--粉丝 -->
        <div class="gzfs">
            <div>
                <span>{{guanzhu}}</span>
                <span>关注</span>
            </div>
            <div>
                <span>{{fensi}}</span>
                <span>粉丝</span>
            </div>
        </div>
        <van-divider />
        <!-- 我的收藏和食谱 -->
        <div>
            <van-tabs  color="#EE87B6">
            <van-tab title="我的收藏">{{shoucang}}</van-tab>
            <van-tab title="我的食谱">{{zuopin}}</van-tab>
            </van-tabs>
        </div>    
    </div>
    
    <div>
        <BottomBar></BottomBar>
    </div>
</div>
</template>
<script>
import BottomBar from '../components/bottombar.vue'
export default {
    components:{
        BottomBar
    },
    data(){
        return{
            touxiang:"img/tx/tx.jpg",
            name:"用户名",
            guanzhu:0,
            fensi:0,
            shoucang:"当前无收藏",
            zuopin:"当前无作品"
        }
    },
    methods:{
        self(){
            this.$router.push({
              path:"/changeSelf"
              })
        },
        shezhi(){
             this.$router.push({
              path:"/shezhi"
              })
        }
    },
    computed: {
      
        
    },
}
</script>
<style scoped>
.inner{width: 90%;margin:  0 auto}
.wode-search{display: flex;justify-content: space-between;align-items: center}
.user{display: flex;align-items: center;justify-content: space-between}
.user .name{font-size: .18rem;font-weight: bold}
.user-info{display: flex;flex-direction: column;align-items: center}
.gzfs{display: flex;margin-top:.1rem}
.gzfs div{display: flex;flex-direction: column;align-items: center;margin: .05rem .08rem;
border-right: .01rem solid #CFD1D1;padding-right: .2rem}
.gzfs div span:nth-child(1){font-weight: bold}
</style>